<template>
  <view class="tn-width-full">
    <view class="tn-flex">
      <view class="tn-flex tn-flex-direction-column">
        <tn-tag shape="radius" backgroundColor="#0a47c4" fontColor="#fff" v-for="(item, index) of value"
                :key="item.value" margin="4rpx"
                width="auto" class="tn-padding-right-sm">
          <view class="tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-center">
            <view>{{ item.label }}</view>
            <view class="tn-margin-left-sm tn-text-xs" @click="remove(index)">删除</view>
          </view>
        </tn-tag>
      </view>
      <tn-input type="select" class="select-icon" :selectOpen="jingbanrenSelectShow"
                @click="jingbanrenSelectShow = true"/>
    </view>

    <tn-select class="select" v-model="jingbanrenSelectShow" mode="single" :list="list" :value-name="keyValue.value"
               :label-name="keyValue.label"
               @confirm="jinbanrenConfirm"></tn-select>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    keyValue: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value"
        };
      }
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      jingbanrenSelectShow: false,
    };
  },
  methods: {
    jinbanrenConfirm(event) {
      this.$emit("input", [...this.value, ...event])
    },
    remove(index) {
      this.value.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.select-icon {
  height: 35px;

  ::v-deep .tn-input__right-icon {
    position: absolute;
    right: 0;
    top: 10px;
  }
}

.select {
  ::v-deep .tn-select__content__body__search {
    line-height: normal;
  }
}
</style>
